<template>
  <div class="home">
    <!-- 顶部导航 -->
    <van-nav-bar title="首页" fixed />

    <!-- 功能入口 -->
    <div class="function-grid">
      <van-grid :column-num="3" :gutter="10">
        <van-grid-item
          icon="clock"
          text="健康管理"
          to="/health/health"
        />
        <van-grid-item
          icon="chat-o"
          text="问诊记录"
          to="/consultation/list"
        />
        <van-grid-item
          icon="friends"
          text="家庭成员"
          to="/family"
        />
      </van-grid>
    </div>

    <!-- 健康科普文章 -->
    <div class="article-section">
      <div class="section-header">
        <span class="title">健康科普</span>
        <van-button
          plain
          type="primary"
          size="small"
          to="/article"
        >
          查看更多
        </van-button>
      </div>

      <div class="article-list">
        <van-skeleton title :row="3" v-if="loading" />
        <template v-else>
          <van-cell
            v-for="article in articles"
            :key="article.id"
            :title="article.title"
            :label="article.summary"
            is-link
            :to="`/article/${article.id}`"
          >
            <template #right-icon>
              <van-image
                v-if="article.coverImage"
                :src="article.coverImage"
                width="60"
                height="60"
              />
            </template>
          </van-cell>
        </template>
      </div>
    </div>

    <!-- 健康小贴士 -->
    <div class="tips-section">
      <div class="section-header">
        <span class="title">健康小贴士</span>
      </div>
      <van-swipe class="tips-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(tip, index) in healthTips" :key="index">
          <div class="tip-content">
            <van-icon :name="tip.icon" />
            <span>{{ tip.content }}</span>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getArticleList } from '@/api/article'

const loading = ref(false)
const articles = ref([])

// 健康小贴士数据
const healthTips = ref([
  { icon: 'clock', content: '规律作息,保证充足睡眠' },
  { icon: 'like', content: '每天运动30分钟' },
  { icon: 'food', content: '均衡饮食,多吃蔬果' },
  { icon: 'water', content: '每天喝够8杯水' }
])

// 获取文章列表
const loadArticles = async () => {
  try {
    loading.value = true
    const { data } = await getArticleList({ current: 1, size: 3 })
    articles.value = data.records
  } catch (error) {
    console.error('获取文章列表失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadArticles()
})
</script>

<style lang="scss" scoped>
.home {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  padding-bottom: 50px;

  .function-grid {
    background-color: #fff;
    margin: 12px;
    border-radius: 8px;
  }

  .article-section,
  .tips-section {
    margin: 12px;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #323233;
      }
    }
  }

  .article-list {
    :deep(.van-cell) {
      padding: 12px 0;

      &:not(:last-child) {
        border-bottom: 1px solid #ebedf0;
      }

      .van-cell__title {
        flex: 1;
        margin-right: 12px;
      }
    }
  }

  .tips-swipe {
    height: 60px;

    .tip-content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #666;

      .van-icon {
        margin-right: 8px;
        color: #1989fa;
      }
    }
  }
}
</style>
